<template>
  <div>
    <V-CommonHeaderLeft>
      <div id="app" :class="{active:isActive}">
        <el-row>
          <!-- 头部 -->
          <div class="header">
            <el-col :span="5" class="header-nav">
              <router-link to="/">首页&nbsp;&nbsp;/</router-link>
              <router-link to="/">营销&nbsp;&nbsp;/</router-link>
              <router-link to="/">订单促销&nbsp;&nbsp;/</router-link>
              <router-link to="/">新增订单促销</router-link>
            </el-col>
          </div>
        </el-row>
        <!-- 第二部分 -->
        <div class="contents">
          <div class="contents-header">
            <h3>促销详情</h3>
          </div>
          <el-row>
            <el-col :span="3">
              <div class="contents-left">
                <p>促销时间</p>
                <p>阶段促销</p>
                <p>促销规则</p>
                <p>客户类型</p>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="contents-right">
                <!--选择日期-->
                <el-col :span="3">
                  <el-form>
                    <div class="contents-select-data">
                      <el-date-picker
                        style="width:500px;border-radius:0;height:37px;"
                        v-model="value1"
                        type="daterange"
                        range-separator="~"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                      ></el-date-picker>
                    </div>
                  </el-form>
                </el-col>
                <!--/选择日期-->
                <el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm">
                  <!-- <el-form-item prop="type">
                <el-checkbox-group v-model="ruleForm.type">
                  <el-checkbox label="启用" name="type"></el-checkbox>
                </el-checkbox-group>
                  </el-form-item>-->
                  <div class="checkOne">
                    <input type="checkbox" name id="checkone" @click="qiYong()">
                    <label for="checkone" :class="{color:isColor}">启用</label>
                  </div>
                  <el-form-item>
                    <el-radio-group v-model="ruleForm.resource">
                      <el-radio label="买赠" @change.native="buy()" id="buy-radio" checked></el-radio>
                    </el-radio-group>
                    <!--  1111111111111111111111111111111111-->
                    <div class="xunBuy" v-for="(item, index) in arr" :key="index">
                      <div class="buy" v-if="showBuy">
                        单笔订货金额≥
                        <input type="text" placeholder="请输入订单金额">
                        元，获赠品
                        <span @click="placeChoose()">请选择商品</span>
                        <input type="text" placeholder="请输入数量">
                        个
                      </div>
                      <div class="del" @click="delQu()" v-if="showDel"></div>
                    </div>
                    <div class="addQu" v-if="showQu" @click="addQu()">+添加区间</div>
                    <!--  1111111111111111111111111111111111-->
                  </el-form-item>
                  <el-form-item>
                    <el-radio-group v-model="ruleForm.resource">
                      <el-radio label="满减" @change.native="resouce()"></el-radio>
                    </el-radio-group>
                    <!--111111111111111111111111111111111111111111111111111-->
                    <div class="xunRes" v-for="(item, index) in arrRes" :key="index">
                      <div class="resouce" v-if="showRes">
                        订购金额≥
                        <input type="text" placeholder="请输入金额">
                        元，立减
                        <input type="text" placeholder="请输入金额">
                        元
                      </div>
                      <div class="del" @click="delResQu()" v-if="showResDel"></div>
                    </div>
                    <div class="addQu" v-if="showResQu" @click="resQu()">+添加区间</div>
                    <!--111111111111111111111111111111111111111111111111111-->
                  </el-form-item>
                  <el-form-item>
                    <el-radio-group v-model="ruleForm.resource">
                      <el-radio label="打折（应付订单总金额=订单金额x折扣）" @change.native="zhe()"></el-radio>
                    </el-radio-group>
                    <!-- 333333333333333333333333333333333333333333 -->
                    <div class="xunZhe" v-for="(item, index) in arrZhe" :key="index">
                      <div class="zhe" v-if="showZhe">
                        订购金额≥
                        <input type="text" placeholder="请输入订单金额">
                        元，打折
                        <input type="text" placeholder="请输入折扣">
                        %
                      </div>
                      <div class="del" @click="delZheQu()" v-if="showZheDel"></div>
                    </div>
                    <div class="addQu" v-if="showZheQu" @click="zheQu()">+添加区间</div>
                    <!-- 333333333333333333333333333333333333333333333333333333333333 -->
                  </el-form-item>
                </el-form>
                <!-- 全选 -->
                <div class="checkAll">
                  <el-checkbox
                    :indeterminate="isIndeterminate"
                    v-model="checkAll"
                    @change="handleCheckAllChange"
                  >全选</el-checkbox>
                  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 弹出框：请选择商品 -->
        <div class="chooseTan" v-if="showTan" :class="{active2:isActive2}">
          <div class="h">
            <h3>请选择赠品</h3>
            <p @click="closeTan()">x</p>
          </div>
          <div class="chooseTan-header">
            <input type="search" placeholder="请输入商品名称|商品编号|规格">
            <input type="search" placeholder="请选择分类" @click="chooseSelect()">
            <el-tree
              :data="data"
              :props="defaultProps"
              @node-click="handleNodeClick()"
              v-if="showTree"
              class="elTree"
            ></el-tree>
            <div class="kong" @click="chooseSelect2()"></div>
          </div>
          <div class="chooseTan-data">
            <el-row class="choose-row">
              <el-col :span="3">规格图</el-col>
              <el-col :span="8" :offset="1">商品名称|商品编号</el-col>
              <el-col :span="4" :offset="1">规格名称|规格编号</el-col>
              <el-col :span="2" :offset="2">售价</el-col>
            </el-row>
            <el-row class="choose-data" v-for="(site,key) in chooseData" :key="key">
              <el-col :span="3">
                <!-- <img src="{site.url}" alt> -->
                {{site.url}}
              </el-col>
              <el-col :span="8" :offset="1" class="spans">
                <span>{{site.goodsName}}</span>
                <span>{{site.goodsBian}}</span>
              </el-col>
              <el-col :span="4" :offset="1" class="spans">
                <span>{{site.stateName}}</span>
                <span>{{site.stateBian}}</span>
              </el-col>
              <el-col :span="2" :offset="2" style="line-height:50px">￥{{site.price}}</el-col>
            </el-row>
            <!-- 分页（作为公公模板引入） -->
          </div>
        </div>
        <div class="footer">
          <div class="footer-one"></div>
          <div class="footer-two">
            <router-link to="/">取消</router-link>
            <router-link to="/">保存</router-link>
          </div>
        </div>
      </div>
    </V-CommonHeaderLeft>
  </div>
</template>

<script>
import VCommonHeaderLeft from './../common/vCommonHeaderLeft/VCommonHeaderLeft'
const cityOptions = ['一级经销商', '普通代理商', 'VIP代理商', '二级代理商']
export default {
  components: {
    VCommonHeaderLeft
  },
  data () {
    return {
      // 买赠
      arr: [1],
      showBuy: true,
      showZhe: false,
      showQu: false,
      showDel: false,
      // 满减：
      showRes: false,
      arrRes: [1],
      showResDel: false,
      showResQu: false,
      // 打折
      arrZhe: [1],
      showZheDel: false,
      showZheQu: false,
      // 下拉菜单
      showTree: false,
      // 弹出框
      showTan: false,
      // 全局加罩
      isActive: false,
      isActive2: true,
      // 日期选择
      // checkbox的label点击的颜色
      isColor: false,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      value1: '',
      value2: '',
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '买赠',
        desc: ''
      },
      // 全选
      checkAll: false,
      checkedCities: ['上海', '北京'],
      cities: cityOptions,
      isIndeterminate: true,
      // 赠品选择弹出框：
      // 下拉菜单
      chooseData: [
        {
          url: '111',
          goodsName: '兰蔻小黑瓶',
          goodsBian: '1',
          stateName: '1',
          stateBian: '1',
          price: '100'
        }, {
          url: '111',
          goodsName: '兰蔻小黑瓶',
          goodsBian: '1',
          stateName: '1',
          stateBian: '1',
          price: '100'
        }, {
          url: '111',
          goodsName: '兰蔻小黑瓶',
          goodsBian: '1',
          stateName: '1',
          stateBian: '1',
          price: '100'
        }, {
          url: '111',
          goodsName: '兰蔻小黑瓶',
          goodsBian: '1',
          stateName: '1',
          stateBian: '1',
          price: '100'
        }],
      data: [
        {
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    // 点击启用
    qiYong () {
      // 买赠：
      this.showQu = !this.showQu
      this.isColor = !this.isColor
      // 满减：
    },
    // 买赠
    buy () {
      this.showQu = true
      this.showBuy = true
      this.showRes = false
      this.showZhe = false
      this.showResQu = false
      this.showZheQu = false
      this.showZheDel = false
    },
    // 添加区间
    addQu () {
      this.arr.push(1)
      if (this.arr.length === 1) {
        this.showDel = false
      } else {
        this.showDel = true
      }
    },
    // 删除区间
    delQu () {
      if (this.arr.length >= 2) {
        this.arr.splice(this.arr.length - 1, 1)
      }
    },
    // 满减
    resouce () {
      this.showRes = true
      this.showBuy = false
      this.showZhe = false
      this.showQu = false
      this.showResQu = true
      this.showDel = false
      this.showZheQu = false
      this.showZheDel = false
    },
    // 添加区间
    resQu () {
      // console.log(111)
      this.arrRes.push(1)
      if (this.arrRes.length === 1) {
        this.showResDel = false
      } else {
        this.showResDel = true
      }
    },
    // 删除区间
    delResQu () {
      if (this.arrRes.length >= 2) {
        this.arrRes.splice(this.arr.length - 1, 1)
      }
    },
    // 打折
    zhe () {
      this.showRes = false
      this.showBuy = false
      this.showZhe = true
      this.showQu = false
      this.showResQu = false
      this.showDel = false
      this.showZheQu = true
    },
    // 添加区间
    zheQu () {
      this.arrZhe.push(1)
      if (this.arrZhe.length === 1) {
        this.showZheDel = false
      } else {
        this.showZheDel = true
      }
    },
    // 删除区间
    delZheQu () {
      if (this.arrZhe.length >= 2) {
        this.arrZhe.splice(this.arrZhe.length - 1, 1)
      }
    },
    // 全选
    handleCheckAllChange (val) {
      this.checkedCities = val ? cityOptions : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange (value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.cities.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
    },
    // 下拉菜单
    handleNodeClick () {
    },
    // 选择下拉菜单
    chooseSelect () {
      this.showTree = true
    },
    chooseSelect2 () {
      this.showTree = false
    },
    // 打开弹框
    placeChoose () {
      this.showTan = true
      this.isActive = true
    },
    // 关闭弹框
    closeTan () {
      this.showTan = false
      this.isActive = false
    }
  }
}
</script>

<style lang="scss" scoped>
#app {
  width: 100%;
  background-color: #f2f5f7;
  padding: 15px 10px 0px 10px;
}
.header {
  height: 45px;
  .header-nav {
    line-height: 30px;
    font-size: 12px;
    display: flex;
    justify-content: space-around;
    padding-left: 10px;
    span {
      display: inline-block;
      margin-left: 10px;
    }
    a {
      color: #999999;
    }
    a:hover {
      color: #20ade5;
    }
  }
  .header-img {
    width: 25px;
    height: 25px;
    border-radius: 5px;
    border: 1px solid #dce4e7;
  }
}
.header-nav a:nth-child(4) {
  color: #333;
}
.header-nav a:nth-child(4):hover {
  color: #333;
}
.contents {
  margin: 0px 10px;
  background-color: #fff;
}
.contents-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e3e3e3;
  padding: 15px 45px 0px 25px;
}
.contents-header > h3 {
  color: #20ade5;
  font-size: 16px;
  letter-spacing: 1px;
  border-bottom: 2px solid #20ade5;
  width: 110px;
  padding-bottom: 15px;
  text-align: center;
}
.contents-left {
  color: #666;
  padding: 15px 0px 0px 35px;
  font-size: 14px;
}
.contents-left > p:nth-child(1) {
  line-height: 45px;
}
.contents-left > p:nth-child(2) {
  line-height: 50px;
}
.contents-left > p:nth-child(3) {
  line-height: 80px;
}
.contents-left > p:nth-child(4) {
  line-height: 45px;
}
.contents-right {
  color: #666;
  padding: 15px 0px 0px 0px;
}
.demo-ruleForm {
  margin: 50px 0px 0px 0px;
}
.checkOne {
  display: flex;
  margin: 48px 0px;
}
.checkOne > input {
  width: 15px;
  height: 15px;
  border: 1px solid #20ade5;
  margin-top: 13px;
}
.checkOne > label {
  font-size: 12px;
  display: inline-block;
  text-indent: 1em;
  margin-top: 13px;
}
.color {
  color: #20ade5;
}
.xunBuy {
  display: flex;
}
.buy {
  color: #666;
  padding: 10px 0px 10px 24px;
}
.buy > input {
  width: 130px;
  height: 40px;
  border: 1px solid #b3b3b3;
  text-indent: 1em;
  margin-left: 5px;
}
.buy > span {
  color: #20ade5;
  cursor: pointer;
}
.xunRes {
  display: flex;
}
.xunZhe {
  display: flex;
}
.del {
  width: 15px;
  height: 15px;
  border: 1px solid;
  margin: 20px 0px 0px 5px;
}
.addQu {
  color: #20ade5;
  text-indent: 1.5em;
  cursor: pointer;
}
.resouce {
  color: #666;
  padding: 10px 0px 10px 24px;
}
.resouce > input {
  width: 130px;
  height: 40px;
  border: 1px solid #b3b3b3;
  text-indent: 1em;
  margin-left: 5px;
}
.zhe {
  color: #666;
  padding: 10px 0px 10px 24px;
}
.zhe > input {
  width: 130px;
  height: 40px;
  border: 1px solid #b3b3b3;
  text-indent: 1em;
  margin-left: 5px;
}
.checkAll {
  display: flex;
}
.chooseTan {
  background-color: #fff;
  width: 1000px;
  height: 510px;
  margin: 0 auto;
  position: absolute;
  top: 100px;
  left: 100px;
  z-index: 5;
}
.h {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e3e3e3;
  height: 40px;
}
.h > h3 {
  font-weight: normal;
  margin-left: 40%;
  line-height: 40px;
}
.h > p {
  color: #7f7f7f;
  margin-left: 47%;
  cursor: pointer;
}
.chooseTan-header {
  padding: 15px 15px;
}
.chooseTan-header > input:nth-child(1) {
  display: inline-block;
  width: 270px;
  height: 30px;
  border: 1px solid #e3e3e3;
  text-indent: 1em;
}
.chooseTan-header > input:nth-child(2) {
  display: inline-block;
  width: 138px;
  height: 30px;
  border: 1px solid #e3e3e3;
  margin-left: 15px;
  text-indent: 1em;
}
.elTree {
  width: 138px;
  box-shadow: 0px 0px 5px 2px #eeeeee;
  margin: 1px 0px 0px 285px;
  position: absolute;
  z-index: 5;
}
.kong {
  width: 500px;
  display: inline-block;
  height: 20px;
}
.chooseTan-data {
  font-size: 12px;
  overflow-x: hidden;
  overflow-y: scroll;
  height: 345px;
}
.chooseTan-data span {
  display: block;
}
.choose-row {
  height: 50px;
  background-color: #fafafa;
  border-top: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
  line-height: 50px;
  padding-left: 20px;
}
.choose-data {
  height: 60px;
  padding-left: 19px;
  border-bottom: 1px solid #e3e3e3;
}
.choose-data:hover {
  background-color: #f5f5f5;
}
.spans span {
  line-height: 25px;
}
// .active {
//   border: 1px solid;
//   opacity: 0.5;
// }
.active2 {
  border: 1px solid #bababa;
  opacity: 1 !important;
}
.footer {
  margin: 0px 10px;
  background-color: #fff;
  padding: 50px 10px 0px 0px;
  height: 52px;
}
.footer-one {
  padding-top: 10px;
  border-top: 1px solid #e3e3e3;
}
.footer-two {
  display: flex;
  margin-left: 70%;
}
.footer-two a {
  display: block;
  width: 150px;
  height: 40px;
  color: #37b5e8;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
}
.footer-two a:nth-child(1) {
  border: 1px solid;
}
.footer-two a:nth-child(2) {
  background-color: #37b5e8;
  color: #fff;
  margin-left: 10px;
}
</style>
